<template>
  <div class="container">
    <!--搜索-->
    <div class="searchContent">
      <searchuinew v-if="showSearch" :searchFormArr="searchFormArrDetail" @searchParma="searchDetailParma" :isAccording="isAccording" ref="child"></searchuinew>
    </div>
    <div class="detailTable">
      <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" style="width: 100%" :row-class-name="tableRowClassName">
        <!-- <el-table-column align="center" header-align="center" label="通话记录ID" prop="ai_instance_id" width="120"></el-table-column> -->
        <el-table-column align="center" header-align="center" label="任务名称" prop="task_name" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="通话时长(秒)" prop="talk_seconds" width="100"></el-table-column>
        <el-table-column align="center" header-align="center" label="通话轮次" prop="talk_times" width="100"></el-table-column>
        <el-table-column align="center" header-align="center" label="意向标签" prop="talk_sts" width="100"></el-table-column>
        <el-table-column align="center" header-align="center" label="客户名称" prop="company_boss" width="100"></el-table-column>
        <el-table-column align="center" header-align="center" label="联系方式" prop="company_phone" width="120"></el-table-column>
        <el-table-column align="center" header-align="center" label="公司名称" prop="company_name" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="归属地" prop="phone_address" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="通话开始时间" prop="talk_start_time" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="通话结束时间" prop="talk_end_time" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="客户类型" prop="customer_type_name" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.customer_type == 1">普通</span>
            <span v-else-if="scope.row.customer_type == 2">意向</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
          <template slot-scope="scope">
            <!-- <el-button size="mini" v-if="scope.row.customer_type == 1" type="text" @click="addIntended(scope.row, '2')">添加至意向客户</el-button> -->
            <!-- <el-button size="mini" v-else-if="scope.row.customer_type == 2" type="text" @click="addIntended(scope.row, '1')">取消意向客户</el-button> -->
            <el-button size="mini" v-if="scope.row.is_black == 0" type="text" @click="addBlack(scope.row, 1)">加黑名单</el-button>
            <el-button size="mini" v-else-if="scope.row.is_black == 1" type="text" @click="addBlack(scope.row, 0)">取消黑名单</el-button>
            <el-button size="mini" type="text" @click="aiTalkRecord(scope.$index, scope.row)">查看录音</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        :current-page="detailPageIndex"
        :page-size="detailPageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="detailTotalPage"
        @current-change="currentChangeDetailHandle"
        @size-change="sizeChangeDetailHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
    <!--  Ai外呼记录-->
    <el-drawer title="记录" :visible.sync="AIVisible" :destroy-on-close="true" size="70%">
      <record :info="current" :filter="filter" :index="currentIndex" :total="detailTotalPage" @changeLevel="changeLevel" @positionChange="positionChange" />
    </el-drawer>
  </div>
</template>

<script>
import { addIntendedTApi, AITasksAddBlockTApi, AITasksInfoApi, apiGetBatchList } from '@/api/outboundCall'
import record from './record.vue'
export default {
  components: { record },
  name: 'smsFlow',
  data() {
    return {
      showSearch: false,
      initBatch: false,
      isAccording: true,
      dataList: [],
      searchFormArrDetail: [
        {
          fieldName: '时间选择',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
        {
          fieldName: '',
          type: 'select',
          field: 'talk_sts',
          option: [
            { id: 'A', text: 'A' },
            { id: 'B', text: 'B' },
            { id: 'C', text: 'C' },
            { id: 'D', text: 'D' },
            { id: 'E', text: 'E' },
            { id: 'F', text: 'F' },
          ],
          placeholder: '请选择意向标签',
          multiple: true,
          width: 180,
        },
        {
          fieldName: '',
          type: 'select',
          field: 'talk_times',
          option: [
            { id: '10以上', text: '10以上' },
            { id: '10', text: '10' },
            { id: '9', text: '9' },
            { id: '8', text: '8' },
            { id: '7', text: '7' },
            { id: '6', text: '6' },
            { id: '5', text: '5' },
            { id: '4', text: '4' },
            { id: '3', text: '3' },
            { id: '2', text: '2' },
            { id: '1', text: '1' },
            { id: '0', text: '0' },
          ],
          placeholder: '请选择通话轮次',
          width: 180,
        },
        {
          fieldName: '',
          type: 'select',
          field: 'batch',
          option: [],
          placeholder: '请选择任务批次',
          width: 180,
        },
        {
          fieldName: '',
          type: 'inputSearch',
          field: 'title',
          placeholder: '请输入搜索的用户号码',
        },
      ],
      detailPageIndex: 1,
      detailPageSize: 100,
      detailTotalPage: 0,
      searchDetailParams: {
        title: '',
        talk_sts: '',
        talk_times: '',
        batch: '',
        start_time: '',
        end_time: '',
      },
      AIVisible: false, //Ai外呼记录弹出层
      current: {},
      currentIndex: null,
    }
  },
  created() {
    this.setSearchDetailParma()
    this.setQuery()
    this.getBatchList()
  },
  computed: {
    filter() {
      return Object.assign({ pageNumber: this.detailPageIndex, pageSize: this.detailPageSize }, this.searchDetailParams)
    },
  },
  mounted() {
    this.$refs.child.submitForm()
  },
  methods: {
    // 设置批次号
    setQuery() {
      if (this.$route.query.batch) {
        this.searchFormArrDetail.find((item) => {
          return item.field === 'batch'
        }).default = this.$route.query.batch
        this.searchFormArrDetail.find((item) => {
          return item.field === 'time'
        }).default = ['', '']
        this.searchDetailParams.batch = this.$route.query.batch
        this.searchDetailParams.start_time = this.searchDetailParams.end_time = ''
      }
      this.showSearch = true
    },
    AITasksInfo() {
      this.initBatch = true
      const info = Object.assign({ pageNumber: this.detailPageIndex, pageSize: this.detailPageSize }, this.searchDetailParams)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      AITasksInfoApi(formData)
        .then((res) => {
          this.dataList = res.result.items
          this.detailTotalPage = res.result.total
        })
        .catch((e) => {
          this.dataList = []
          this.detailTotalPage = 0
        })
    },
    // 设置日期筛选默认今天
    setSearchDetailParma() {
      const today = new Date()
      const todayFormat = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
      this.searchFormArrDetail[0].default = [todayFormat, todayFormat]
      this.searchDetailParams.start_time = todayFormat
      this.searchDetailParams.end_time = todayFormat
    },
    // 详情查询
    searchDetailParma(e) {
      let timeChange = false
      if ((e.time && (this.searchDetailParams.start_time !== e.time[0] || this.searchDetailParams.end_time !== e.time[1])) || (!e.time && (this.searchDetailParams.start_time !== '' || this.searchDetailParams.end_time !== ''))) {
        timeChange = true
      }
      if (e.title) {
        this.searchDetailParams.title = e.title
      } else {
        this.searchDetailParams.title = ''
      }
      if (e.time) {
        this.searchDetailParams.start_time = e.time[0]
        this.searchDetailParams.end_time = e.time[1]
      } else {
        this.searchDetailParams.start_time = ''
        this.searchDetailParams.end_time = ''
      }
      if (e.talk_sts) {
        this.searchDetailParams.talk_sts = e.talk_sts
      } else {
        this.searchDetailParams.talk_sts = ''
      }
      if (e.batch) {
        this.searchDetailParams.batch = e.batch
      } else {
        this.searchDetailParams.batch = ''
      }
      if (e.talk_times) {
        this.searchDetailParams.talk_times = e.talk_times
      } else {
        this.searchDetailParams.talk_times = ''
      }
      this.detailPageIndex = 1

      if (timeChange && this.initBatch) {
        this.searchDetailParams.batch = ''
        this.$refs.child && this.$refs.child.clearFormItem('batch')
        this.getBatchList()
      }
      this.AITasksInfo()
    },
    getBatchList() {
      const formData = new FormData()
      formData.set('start_time', this.searchDetailParams.start_time)
      formData.set('end_time', this.searchDetailParams.end_time)

      apiGetBatchList(formData).then((res) => {
        let option = this.searchFormArrDetail.find((item) => {
          return item.field === 'batch'
        })
        if (res && res.data && res.data.length > 0) {
          option.option = res.data.map((item) => {
            return {
              id: item.batch,
              text: item.title,
            }
          })
        } else {
          option.option = []
        }
      })
    },
    // 每页数
    sizeChangeDetailHandle(val) {
      this.detailPageSize = val
      this.detailPageIndex = 1
      this.AITasksInfo()
    },
    // 当前页
    currentChangeDetailHandle(val) {
      this.detailPageIndex = val
      this.AITasksInfo()
    },
    addBlack(data, sts) {
      const info = Object.assign({ id: data.company_id, sts: sts })
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      AITasksAddBlockTApi(formData)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: sts === 1 ? '加黑名单成功' : '取消黑名单成功',
              type: 'success',
            })
            this.AITasksInfo()
          }
        })
        .catch((e) => {})
    },
    addIntended(data, sts) {
      const info = Object.assign({ id: data.company_id, sts: sts })
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      let message = ''
      if (sts == '2') {
        message = '添至意向客户成功'
      } else if (sts == '1') {
        message = '取消意向客户成功'
      }
      addIntendedTApi(formData)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: message,
              type: 'success',
            })
            this.AITasksInfo()
          }
        })
        .catch((e) => {})
    },
    // 表格标注颜色：如果 talk times > 2 and status = 1 标注其他颜色else 默认色
    tableRowClassName({ row, rowIndex }) {
      if (row.talk_times > 2 && row.status === 1) {
        return 'high-light'
      } else if (rowIndex === this.currentIndex) {
        return 'high-light-current'
      }
      return ''
    },
    // ai外呼记录
    aiTalkRecord(index, data) {
      this.current = data
      this.currentIndex = index
      this.AIVisible = true
    },
    // 修改ai外呼等级
    changeLevel({ id, sts }) {
      const item = this.dataList.find((item) => {
        return item.id === id
      })
      if (item) {
        item.talk_sts = sts
      }
    },
    // 高亮位置变化
    positionChange(pos) {
      this.currentIndex += pos
      if (this.currentIndex > this.detailPageSize - 1) {
        // 翻页啦
        this.detailPageIndex++
        this.currentIndex = 0
        this.AITasksInfo()
      } else if (this.currentIndex < 0) {
        this.detailPageIndex--
        this.currentIndex = this.detailPageSize - 1
        this.AITasksInfo()
      }
      // 页面滚动
      document.getElementsByClassName('el-table__row')[this.currentIndex].scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'start',
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 16px;
  box-sizing: border-box;
  background: #f0f1f4;
  .searchContent {
    width: 100%;
    background: #fff;
    padding: 12px 16px;
    box-sizing: border-box;
  }
  .detailTable {
    margin-top: 10px;
    width: 100%;
    background: #fff;
    padding: 24px 32px;
    box-sizing: border-box;
  }
}
::v-deep .high-light {
  background: rgb(240, 249, 235);
}
::v-deep .high-light-current {
  background: rgb(217, 236, 255);
}
</style>
